<template>
  <view class="person-search-page">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="请输入职位名称" />
      </view>
    </view>
    
    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view class="filter-item">
        <text>城市地区</text>
        <text class="arrow-icon">▼</text>
      </view>
      <view class="filter-item">
        <text>选择工种</text>
        <text class="arrow-icon">▼</text>
      </view>
    </view>
    
    <!-- 人员列表 -->
    <view class="person-list">
      <!-- 人员卡片 1 -->
      <view class="person-card">
        <view class="card-header">
          <image class="avatar" :src="$mConfig.imageUrl + '/image/avatar-female.png'" mode="aspectFill"></image>
          <view class="basic-info">
            <view class="name-row">
              <text class="name">张潇潇</text>
            </view>
            <view class="info-row">
              <text class="gender">女</text>
              <text class="age">34岁</text>
              <text class="experience">10年以上经验</text>
              <text class="education">本科</text>
            </view>
          </view>
        </view>
        <view class="job-info">
          <view class="job-type">
            <text class="job-icon">🏢</text>
            <text>操作工・普工</text>
          </view>
          <view class="salary">面议</view>
        </view>
        <view class="advantage">
          <text class="advantage-label">优势:</text>
          <text class="advantage-content">工作内容是: 劳动者从事劳动的工种、岗位劳动者从事劳动的工种、岗位曾就职于瞪羚企业:参与新经生活板块业务卧</text>
        </view>
      </view>
      
      <!-- 人员卡片 2 -->
      <view class="person-card">
        <view class="card-header">
          <image class="avatar" :src="$mConfig.imageUrl + '/image/avatar-male.png'" mode="aspectFill"></image>
          <view class="basic-info">
            <view class="name-row">
              <text class="name">张潇潇</text>
            </view>
            <view class="info-row">
              <text class="gender">男</text>
              <text class="age">34岁</text>
              <text class="experience">10年以上经验</text>
              <text class="education">本科</text>
            </view>
          </view>
        </view>
        <view class="job-info">
          <view class="job-type">
            <text class="job-icon">🏢</text>
            <text>操作工・普工</text>
          </view>
          <view class="salary">5k-7k</view>
        </view>
        <view class="advantage">
          <text class="advantage-label">优势:</text>
          <text class="advantage-content">工作内容是: 劳动者从事劳动的工种、岗位劳动者从事劳动的工种、岗位曾就职于瞪羚企业:参与新经生活板块业务卧</text>
        </view>
      </view>
      
      <!-- 人员卡片 3 -->
      <view class="person-card">
        <view class="card-header">
          <image class="avatar" :src="$mConfig.imageUrl + '/image/avatar-female.png'" mode="aspectFill"></image>
          <view class="basic-info">
            <view class="name-row">
              <text class="name">张潇潇</text>
            </view>
            <view class="info-row">
              <text class="gender">女</text>
              <text class="age">34岁</text>
              <text class="experience">10年以上经验</text>
              <text class="education">本科</text>
            </view>
          </view>
        </view>
        <view class="job-info">
          <view class="job-type">
            <text class="job-icon">🏢</text>
            <text>操作工・普工</text>
          </view>
          <view class="salary">面议</view>
        </view>
        <view class="advantage">
          <text class="advantage-label">优势:</text>
          <text class="advantage-content">工作内容是: 劳动者从事劳动的工种、岗位劳动者从事劳动的工种、岗位曾就职于瞪羚企业:参与新经生活板块业务卧</text>
        </view>
      </view>
      
      <!-- 人员卡片 4 -->
      <view class="person-card">
        <view class="card-header">
          <image class="avatar" :src="$mConfig.imageUrl + '/image/avatar-male.png'" mode="aspectFill"></image>
          <view class="basic-info">
            <view class="name-row">
              <text class="name">张潇潇</text>
            </view>
            <view class="info-row">
              <text class="gender">男</text>
              <text class="age">34岁</text>
              <text class="experience">10年以上经验</text>
              <text class="education">本科</text>
            </view>
          </view>
        </view>
        <view class="job-info">
          <view class="job-type">
            <text class="job-icon">🏢</text>
            <text>操作工・普工</text>
          </view>
        </view>
        <view class="advantage">
          <text class="advantage-label">优势:</text>
          <text class="advantage-content">工作内容是: 劳动者从事劳动的工种、岗位劳动者从事劳动的工种、岗位曾就职于瞪羚企业:参与新经生活板块业务卧</text>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <text class="tab-icon">🏠</text>
        <text>找牛人</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">📋</text>
        <text>应聘管理</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">📦</text>
        <text>工作台</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">💬</text>
        <text>消息</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">👤</text>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.person-search-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx;
  
  .search-bar {
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    
    .search-input {
      height: 70rpx;
      background-color: #f2f2f2;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      border-radius: 8rpx;
      
      .search-icon {
        font-size: 28rpx;
        color: #999;
        margin-right: 10rpx;
      }
      
      input {
        flex: 1;
        height: 70rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  
  .filter-bar {
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f2f2f2;
    
    .filter-item {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
      font-size: 28rpx;
      color: #666;
      
      .arrow-icon {
        font-size: 20rpx;
        margin-left: 6rpx;
        color: #999;
      }
    }
  }
  
  .person-list {
    padding: 0;
    
    .person-card {
      background-color: #ffffff;
      padding: 30rpx;
      margin-bottom: 2rpx;
      
      .card-header {
        display: flex;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 15rpx;
          margin-right: 20rpx;
          background-color: #f2f2f2;
        }
        
        .basic-info {
          flex: 1;
          
          .name-row {
            margin-bottom: 10rpx;
            
            .name {
              font-size: 34rpx;
              font-weight: bold;
              color: #333;
            }
          }
          
          .info-row {
            font-size: 26rpx;
            color: #666;
            
            .gender, .age, .experience {
              margin-right: 20rpx;
            }
          }
        }
      }
      
      .job-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .job-type {
          display: flex;
          align-items: center;
          background-color: #f2f2f2;
          padding: 8rpx 16rpx;
          border-radius: 6rpx;
          font-size: 26rpx;
          color: #666;
          
          .job-icon {
            margin-right: 6rpx;
            color: #999;
          }
        }
        
        .salary {
          font-size: 26rpx;
          color: #3A92FF;
        }
      }
      
      .advantage {
        display: flex;
        font-size: 26rpx;
        line-height: 1.5;
        
        .advantage-label {
          color: #3A92FF;
          margin-right: 8rpx;
        }
        
        .advantage-content {
          flex: 1;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
  
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110rpx;
    background-color: #ffffff;
    display: flex;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #999;
      
      .tab-icon {
        font-size: 46rpx;
        margin-bottom: 4rpx;
      }
      
      &.active {
        color: #3A92FF;
      }
    }
  }
}
</style>